<template>
  <div class="resource">
    <wh-boot
      :queryConfig="queryConfig"
      :tableLoadong="tableLoadong"
      :queryParams="queryParams"
      @submitForm="submitForm"
      :buttonConfig="buttonConfig"
      @handleAall="handleAall"
      :heigth="heigth"
      :maxHeight="maxHeight"
      :border="border"
      label-width="auto"
      :tableConfig="tableConfig"
      :dataList="dataList"
      :listQuery="listQuery"
      :paginationShow="paginationShow"
      @submitTable="submitTable"
      :modalConfig="modalConfig"
      @submitDialog="submitDialog"
    >
    </wh-boot>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getRolePages, saveOrUpdate, resourceDelete } from '@/services/role'
export default Vue.extend({
  name: 'Role',
  data () {
    return {
      queryParams: {
        textarea: ''
      },
      tableLoadong: false,
      queryConfig: [{
        name: 'name',
        label: '输入搜索：'
      },
      {
        type: 'button',
        name: 'button',
        labelWidth: '0px',
        options: [
          {
            key: 'query',
            name: 'query',
            type: 'primary',
            size: 'medium',
            label: '查询'
          },
          {
            key: 'resetForm',
            size: 'medium',
            label: '重置',
            type: '-',
            name: 'resetForm'
          }
        ]
      }],
      buttonConfig: [
        {
          popup: 'modal',
          position: 'top',
          icon: 'el-icon-plus',
          modalKey: 'modalKey001',
          type: '-',
          label: '添加',
          name: 'adds',
          order: 1
        }
      ],
      tableConfig: [
        {
          type: 'index',
          name: 'index',
          label: '编号'
        },
        {
          name: 'name',
          label: '角色名称'
        },
        {
          name: 'createdTime',
          label: '添加时间',
          type: 'date'
        },
        {
          name: 'description',
          label: '描述'
        },
        {
          width: '280',
          label: '操作',
          name: 'button',
          type: 'button',
          options: [
            {
              popup: 'modal',
              modalKey: 'modalKey002',
              apiKey: '001',
              label: '编辑',
              plain: '0',
              type: 'text',
              emit: true,
              name: 'edit',
              position: 'row',
              order: 1
            },
            {
              popup: 'confirm',
              label: '删除',
              plain: '0',
              type: 'text',
              position: 'row',
              emit: true,
              name: 'delete',
              order: 1
            }
          ]
        }
      ],
      listQuery: {
        page: 1,
        pageSize: 5,
        pageCount: 10
      },
      modalConfig: {
        modalKey001: {
          dialogType: 'close',
          queryConfig: [
            {
              name: 'name',
              label: '角色名称',
              span: 24
            },
            {
              name: 'name',
              label: '角色编码',
              span: 24
            },
            {
              name: 'description',
              label: '描述：',
              type: 'textarea',
              span: 24
            },
            {
              type: 'button',
              name: 'button',
              span: 24,
              labelWidth: '0px',
              options: [
                {
                  key: 'save',
                  name: 'save',
                  size: 'medium',
                  label: '保存'
                },
                {
                  key: 'close',
                  name: 'close',
                  size: 'medium',
                  label: '关闭',
                  type: '-'
                }
              ]
            }
          ],
          formDataApiname: '001',
          titleText: '新增',
          queryParams: {},
          rules: {
            name: {
              trigger: 'blur',
              message: '请输入角色名称',
              required: true
            }

          }
        },

        modalKey002: {
          dialogType: 'close',
          queryConfig: [
            {
              name: 'name',
              label: '角色名称',
              span: 24
            },
            {
              name: 'name',
              label: '角色编码',
              span: 24
            },
            {
              name: 'description',
              label: '描述：',
              type: 'textarea',
              span: 24
            },
            {
              type: 'button',
              name: 'button',
              span: 24,
              labelWidth: '0px',
              options: [
                {
                  key: 'save',
                  name: 'save',
                  size: 'medium',
                  label: '编辑'
                },
                {
                  key: 'close',
                  name: 'close',
                  size: 'medium',
                  label: '关闭',
                  type: '-'
                }
              ]
            }
          ],
          titleText: '编辑',
          queryParams: {},
          rules: {
            name: {
              trigger: 'blur',
              message: '请输入角色名称',
              required: true
            }
          }
        }
      },
      dataList: [],
      heigth: '300px',
      maxHeight: '500px',
      border: false,
      paginationShow: true
    }
  },
  created () {
    this.querys()
  },
  methods: {
    async querys (loading?: Function) {
      this.tableLoadong = true
      try {
        const { data } = await getRolePages({ ...this.queryParams, size: this.listQuery.pageSize, current: this.listQuery.page })
        loading && loading('0', 'disabled')
        this.dataList = data.records
        this.listQuery.pageCount = data.total
      } catch (error) {
        console.log(error)
      }

      this.tableLoadong = false
    },

    submitForm (item: any, row: any, Loading: any) {
      if (item === 'resetForm') {
        this.listQuery.page = 1
        console.log(this.queryParams)
      }
      Loading && Loading('1', 'disabled')
      this.querys(Loading)
      // console.log(item, row)
      // setTimeout(() => Loading('0'), 500)
    },
    handleAall (item: any, row: any, Loading: any) {
      if (item.popup === 'modal') {
        (this.modalConfig as any)[item.modalKey].dialogType = 'add'
      }
      //  else if (item.popup === 'url') {
      //   this.$router.push({ name: 'resourceCategory' })
      // }
    },
    submitTable (item: any, row: any, index: any) {
      if (item === 'query') {
        this.querys()
      } else if (item.popup === 'modal') {
        (this.modalConfig as any)[item.modalKey].dialogType = item.name
        ; (this.modalConfig as any)[item.modalKey].queryParams = { ...row }
      } else if (item.popup === 'confirm') {
        this.confirmShow(item, row)
      }
    },
    async submitDialog (item: any, row: any, Loading: any) {
      console.log(row)
      Loading('1')
      try {
        const { mesg } = await saveOrUpdate(row) as any
        this.$message.success(mesg)
        this.querys()
      } catch (error) {
        console.log(error)
      }

      Loading('0')
    },

    confirmShow (item: any, row: any) {
      // 普通弹窗
      this.$confirm(`确定${item.label}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { mesg } = await resourceDelete(row.id) as any
          this.$message.success(mesg)
          this.querys()
        })
        .catch(error => {
          console.info(error)
          this.$message('已取消')
        })
    }
  }
})
</script>

<style lang="scss" scoped></style>
